<template>
  <div class="account-set">
    <!-- <ComHead /> -->
    <div class="content">
      <div class="my-info-title">
        <img class="logo6" src="@/assets/images/account-set.png" alt="" />
        <span class="name">账户设置</span>
      </div>

      <div>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="centerDialogVisible = true"
          >创建</el-button
        >
      </div>

      <div>
        <!-- 支付宝（其实不分，会进行判断，这是为了分类，以后不分类的话，不需要改了） -->
        <el-row :gutter="40">
          <el-col
            v-for="(item, index) in AlipayData"
            :key="index"
            :span="6"
            style="margin: 10px 0px"
          >
            <div
              :class="
                item.signAccountType == 'WUKONG'
                  ? 'bankBox'
                  : item.signAccountType == 'ALIPAY'
                  ? 'Alipay'
                  : 'PocketBook'
              "
            >
              <el-row>
                <el-col :span="3" style="margin: 0px 5px">
                  <div class="imgBox">
                    <!-- 银联 -->
                    <img
                      src="@/assets/img/yinlian.png"
                      alt
                      style="width: 25px; height: 20px"
                      v-show="item.signAccountType == 'WUKONG'"
                    />
                    <!-- 支付宝 -->
                    <img
                      src="@/assets/img/zfb11.png"
                      alt
                      style="height: 25px"
                      v-show="item.signAccountType == 'ALIPAY'"
                    />
                    <!-- 记账本 -->
                    <img
                      src="@/assets/img/jzb.png"
                      alt
                      style="height: 25px"
                      v-show="item.signAccountType == 'ALIPAYACCOUNTBOOK'"
                    />
                  </div>
                </el-col>
                <el-col :span="18">
                  <div class="nameBox">
                    <span class="name_name" :title="item.accountName"
                      >支付名称:{{ item.accountName }}</span
                    >
                    <span class="name_money" :title="item.balance">余额:{{ item.balance || 0 }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="RemarkBox">
                <el-col :span="14" style="padding-left: 2px">
                  <span v-show="item.signAccountType == 'WUKONG'"
                    >备注:{{ item.notes }}</span
                  >
                </el-col>
              </el-row>

              <el-row class="ButtonBox">
                <!-- //银联 -->
                <el-col :span="20" v-show="item.signAccountType == 'WUKONG'">
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="renewButton(item)"
                    >更新</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    v-show="item.signStatus != 'SUCCESS'"
                    @click="UnionPayEdit('银联签约', item)"
                    >签约</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="editButton('银联', item)"
                    >编辑名称</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="PocketBookDelete(item)"
                    >删除</el-button
                  >
                </el-col>
                <!-- //支付宝 -->
                <el-col :span="20" v-show="item.signAccountType == 'ALIPAY'">
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="renewButton(item)"
                    >更新</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    v-show="item.signStatus != 'SUCCESS'"
                    @click="AlipayEdit('支付宝签约', item)"
                    >签约</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="editButton('2', item)"
                    >编辑名称</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="PocketBookDelete(item)"
                    >删除</el-button
                  >
                  <!-- 开关 -->
                  <el-switch
                    v-model="item.withdrawState"
                    style="margin-left: 10px"
                    active-color="#13ce66"
                    inactive-color="#696969"
                    @input="withdrawStateButton(item)"
                  >
                  </el-switch>
                </el-col>
                <!-- //记账本 -->
                <el-col
                  :span="20"
                  v-show="item.signAccountType == 'ALIPAYACCOUNTBOOK'"
                >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="renewButton(item)"
                    >更新</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    v-show="item.signStatus != 'SUCCESS'"
                    @click="SignUp(item)"
                    >签约</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="Recharge(item)"
                    >充值</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="editButton('0', item)"
                    >编辑名称</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="PocketBookDelete(item)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <div class="xhxBox" v-show="AlipayData.length > 0"></div>
        <!-- 记账本（其实不分，会进行判断，这是为了分类，以后不分类的话，不需要改了） -->
        <el-row :gutter="40">
          <el-col
            v-for="(item, index) in PocketBookList"
            :key="index"
            :span="6"
            style="margin: 10px 0px"
          >
            <div
              :class="
                item.signAccountType == 'WUKONG'
                  ? 'bankBox'
                  : item.signAccountType == 'ALIPAY'
                  ? 'Alipay'
                  : 'PocketBook'
              "
            >
              <el-row>
                <el-col :span="3" style="margin: 0px 5px">
                  <div class="imgBox">
                    <!-- 记账本 -->
                    <img
                      src="@/assets/img/jzb.png"
                      alt
                      style="height: 25px"
                      v-show="item.signAccountType == 'ALIPAYACCOUNTBOOK'"
                    />
                  </div>
                </el-col>
                <el-col :span="18">
                  <div class="nameBox">
                    <span :title="item.accountName">支付名称:{{ item.accountName }}</span>
                    <span class="name_money" :title="item.balance">余额:{{ item.balance || 0 }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="RemarkBox">
                <el-col :span="14" style="padding-left: 2px">
                  <span v-show="item.signAccountType == 'WUKONG'"
                    >备注:{{ item.notes }}</span
                  >
                </el-col>
              </el-row>

              <el-row class="ButtonBox">
                <!-- //记账本 -->
                <el-col
                  :span="20"
                  v-show="item.signAccountType == 'ALIPAYACCOUNTBOOK'"
                >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="renewButton(item)"
                    >更新</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    v-show="item.signStatus != 'SUCCESS'"
                    @click="SignUp(item)"
                    >签约</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="Recharge(item)"
                    >充值</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="editButton('0', item)"
                    >编辑名称</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="PocketBookDelete(item)"
                    >删除</el-button
                  >
                  <!-- 开关 -->
                  <el-switch
                    v-model="item.withdrawState"
                    style="margin-left: 10px"
                    active-color="#13ce66"
                    inactive-color="#696969"
                    @input="withdrawStateButton(item)"
                  >
                  </el-switch>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <div class="xhxBox" v-show="PocketBookList.length > 0"></div>
        <!-- 银联（其实不分，会进行判断，这是为了分类，以后不分类的话，不需要改了） -->
        <el-row :gutter="40">
          <el-col
            v-for="(item, index) in UnionPayList"
            :key="index"
            :span="6"
            style="margin: 10px 0px"
          >
            <div
              :class="
                item.signAccountType == 'WUKONG'
                  ? 'bankBox'
                  : item.signAccountType == 'ALIPAY'
                  ? 'Alipay'
                  : 'PocketBook'
              "
            >
              <el-row>
                <el-col :span="3" style="margin: 0px 5px">
                  <div class="imgBox">
                    <!-- 银联 -->
                    <img
                      src="@/assets/img/yinlian.png"
                      alt
                      style="width: 25px; height: 20px"
                      v-show="item.signAccountType == 'WUKONG'"
                    />
                  </div>
                </el-col>
                <el-col :span="18">
                  <div class="nameBox">
                    <span :title="item.accountName">支付名称:{{ item.accountName }}</span>
                    <span class="name_money" :title="item.balance">余额:{{ item.balance || 0 }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="RemarkBox">
                <el-col :span="14" style="padding-left: 2px">
                  <span v-show="item.signAccountType == 'WUKONG'"
                    >备注:{{ item.notes }}</span
                  >
                </el-col>
              </el-row>

              <el-row class="ButtonBox">
                <!-- //银联 -->
                <el-col :span="20" v-show="item.signAccountType == 'WUKONG'">
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="renewButton(item)"
                    >更新</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    v-show="item.signStatus != 'SUCCESS'"
                    @click="UnionPayEdit('银联签约', item)"
                    >签约</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="editButton('银联', item)"
                    >编辑名称</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="PocketBookDelete(item)"
                    >删除</el-button
                  >
                  <!-- 开关 -->
                  <el-switch
                    v-model="item.withdrawState"
                    style="margin-left: 10px"
                    active-color="#13ce66"
                    inactive-color="#696969"
                    @input="withdrawStateButton(item)"
                  >
                  </el-switch>
                </el-col>
              
              </el-row>
            </div>
          </el-col>
        </el-row>
         <div class="xhxBox" v-show="PocketBookList.length > 0"></div>
         <!-- 薪账户（其实不分，会进行判断，这是为了分类，以后不分类的话，不需要改了） -->
        <el-row :gutter="40">
          <el-col
            v-for="(item, index) in payrollData"
            :key="index"
            :span="6"
            style="margin: 10px 0px"
          >
            <div
              class="payrollDataBox"
            >
              <el-row>
                <el-col :span="3" style="margin: 0px 5px">
                  <div class="imgBox">
                    <!-- 银联 -->
                    <img
                      src="@/assets/img/yinlian.png"
                      alt
                      style="width: 25px; height: 20px"
                      v-show="item.signAccountType == 'PAYACCOUNT'"
                    />
                  </div>
                </el-col>
                <el-col :span="18">
                  <div class="nameBox">
                    <span :title="item.accountName">支付名称:{{ item.accountName }}</span>
                    <span class="name_money" :title="item.balance">余额:{{ item.balance || 0 }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row class="RemarkBox">
                <el-col :span="14" style="padding-left: 2px">
                  <span v-show="item.signAccountType == 'PAYACCOUNT'"
                    >备注:{{ item.notes }}</span
                  >
                </el-col>
              </el-row>

              <el-row class="ButtonBox">
            
                <!-- 薪账户 -->
                 <el-col :span="20" v-show="item.signAccountType == 'PAYACCOUNT'">
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="renewButton(item)"
                    >更新</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    v-show="item.signStatus != 'FAIL'"
                    @click="UnionPayEdit('薪账户', item)"
                    >签约</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="editButton('银联', item)"
                    >编辑名称</el-button
                  >
                  <el-button
                    type="text"
                    size="mini"
                    class="spec"
                    @click="PocketBookDelete(item)"
                    >删除</el-button
                  >
                  <!-- 开关 -->
                  <el-switch
                    v-model="item.withdrawState"
                    style="margin-left: 10px"
                    active-color="#13ce66"
                    inactive-color="#696969"
                    @input="withdrawStateButton(item)"
                  >
                  </el-switch>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 记账本添加弹窗 -->
    <el-dialog
      title="创建"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form
        ref="PocketBookData"
        :model="PocketBookData"
        :rules="PocketBookrules"
        size="medium"
        label-width="95px"
        label-position="left"
      >
        <el-form-item label="新增类型" prop="field102">
          <el-select
            v-model="PocketBookData.field102"
            placeholder="请选择新增类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in field101Options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支付名称" prop="field101">
          <el-input
            v-model.trim="PocketBookData.field101"
            placeholder="请输入支付名称"
            :maxlength="15"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="支付宝账号"
          prop="mobile"
          v-if="PocketBookData.field102 != 3&&PocketBookData.field102 != 4"
        >
          <el-input
            v-model.trim="PocketBookData.mobile"
            placeholder="请输入支付宝账号"
            :maxlength="35"
            show-word-limit
            clearable
            prefix-icon="el-icon-mobile"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" v-show="PocketBookData.field102 == 3||PocketBookData.field102 == 4">
          <el-input
            type="textarea"
            v-model.trim="PocketBookData.Remark"
            
            maxlength="200"
          ></el-input>
        </el-form-item>
      
      </el-form>
      <div slot="footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="PocketBookBotton">确定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑支付名称弹窗 -->
    <el-dialog
      :title="editNameData.hade"
      :visible.sync="editNameShow"
      width="30%"
      center
    >
      <el-form
        ref="editNameData"
        :model="editNameData"
        :rules="editNamerules"
        size="medium"
        label-width="90px"
        label-position="left"
      >
        <el-form-item label="支付名称" prop="name">
          <el-input
            v-model.trim="editNameData.name"
            placeholder="请输入支付名称"
            :maxlength="15"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editNameShow = false">取消</el-button>
        <el-button type="primary" @click="editAlipayBotton">确定</el-button>
      </div>
    </el-dialog>
    <!-- 充值弹窗 -->
    <el-dialog
      title="操作金额"
      :showClose="false"
      :visible.sync="moneyShow"
      width="30%"
      center
    >
      <el-form
        ref="moneyData"
        :model="moneyData"
        :rules="moneyrules"
        size="medium"
        label-width="50px"
        label-position="left"
      >
        <el-form-item label="金额" prop="field101">
          <el-input
            v-model.trim="moneyData.field101"
            placeholder="请输入金额"
            maxlength="7"
            onkeyup="this.value=this.value.replace(/[, ]/g,'')"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="moneyData.field102"
            type="textarea"
            maxlength="200"
            show-word-limit
            clearable
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <!-- //二维码生成 -->
          <vue-qr v-show="qrcode" :text="qrcode" :margin="20" :size="300">
          </vue-qr>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="moneyCancel">取消</el-button>
        <el-button type="primary" @click="moneyShowButton">确定</el-button>
      </div>
    </el-dialog>
    <!-- 银联签约弹窗 -->
    <el-dialog
      :title="titleName"
      :visible.sync="UnionPayShow"
      width="30%"
      center
    >
      <el-form
        ref="elForm"
        :model="UnionPay"
        :rules="UnionPayrules"
        size="medium"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="商户号" prop="field107" v-if="titleName!='薪账户'">
          <el-input
            v-model="UnionPay.field107"
            placeholder="请输入商户号"
            clearable
            :style="{ width: '100%' }"
            onkeyup="this.value=this.value.replace(/[, ]/g,'')"
            maxlength="50"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="APPK" prop="field108">
          <el-input
            v-model="UnionPay.field108"
            placeholder="请输入APPK"
            clearable
            type="textarea"
            :style="{ width: '100%' }"
            maxlength="1000"
          ></el-input>
        </el-form-item>

        <el-form-item label="3DES" prop="field109" v-if="titleName!='薪账户'">
          <el-input
            v-model="UnionPay.field109"
            placeholder="请输入3DES"
            clearable
            type="textarea"
            :style="{ width: '100%' }"
            maxlength="1000"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="是否禁用">
            <el-switch v-model="UnionPay.field1010"></el-switch>
          </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="UnionPayShow = false">取消</el-button>
        <el-button type="primary" @click="UnionPayBotton">确定</el-button>
      </div>
    </el-dialog>
    <!-- 支付宝签约弹窗 -->
    <el-dialog title="支付宝签约" :visible.sync="AlipayShow" width="30%" center>
      <el-form
        ref="AlipayformData"
        :model="AlipayformData"
        :rules="Alipayrules"
        size="medium"
        label-width="200px"
        label-position="left"
      >
        <el-form-item label="APPID" prop="field104">
          <el-input
            v-model="AlipayformData.field104"
            placeholder="请输入APPID"
            :maxlength="20"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="开发者应用私钥" prop="field105">
          <el-input
            v-model="AlipayformData.field105"
            type="textarea"
            show-word-limit
            clearable
            placeholder="请输入开发者应用私钥"
            :maxlength="6000"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label="ROOT文件上传" required>
          <el-upload
            ref="field106"
            class="upload-demo"
            :action="actionUrl()"
            :file-list="field106fileList"
            :on-change="handleChange"
            :auto-upload="false"
            :limit="1"
            accept=".crt"
            :before-upload="field107BeforeUpload"
          >
            <el-button size="small" type="primary" icon="el-icon-upload"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>

        <el-form-item label="支付宝公钥(PUBLIC KEY)" required>
          <el-upload
            class="upload-demo"
            :action="actionUrl()"
            :on-change="AlipayGongYao"
            :auto-upload="false"
            :limit="1"
            accept=".crt"
            ref="field107"
            :file-list="field107fileList"
            :before-upload="field107BeforeUpload"
          >
            <el-button size="small" type="primary" icon="el-icon-upload"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>

        <el-form-item label="应用公钥(PRIVATE KEY)" required>
          <el-upload
            class="upload-demo"
            :action="actionUrl()"
            :on-change="privateKey"
            :auto-upload="false"
            :limit="1"
            accept=".crt"
            ref="field108"
            :file-list="field108fileList"
            :before-upload="field107BeforeUpload"
          >
            <el-button size="small" type="primary" icon="el-icon-upload"
              >点击上传</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="AlipayShow = false">取消</el-button>
        <el-button type="primary" @click="AlipayBotton">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueQr from "vue-qr";
// import ComHead from "@/components/comHead";
import ComHead from "../../components/comHead.vue";
import {
  insertBankConfig,createSignAccountByPayAccount,signByPayAccount,
  editWkxxConfig,
  getUserSignAddresss,
  addAlipayUserAccount,
  getAccountBookRechargeAdress,
  insertAlipayInfo,
  updateAlipayInfo,
  AlipayUpload,
  editSignAccount,
  updateAlipayUserAccount,
  selectTenantExpenditureAccounts,
  getAccountBalance,
} from "@/api/finance/index.js";
import { getSetup, editAPI, comnonConfig } from "@/api/system/index.js";
export default {
  components: {
    ComHead,
  },
  data() {
    return {
      //提现状态开关ID
      withdrawId: null,
      // 创建添加弹窗参数
      centerDialogVisible: false,
      PocketBookrules: {
        field101: [
          {
            required: true,
            message: "请输入支付名称",
            trigger: "change",
          },
        ],
        field102: [
          {
            required: true,
            message: "请选择新增类型",
            trigger: "change",
          },
        ],
        appk: [
          {
            required: true,
            message: "输入APPK",
            trigger: "change",
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入支付宝账号",
            trigger: "change",
          },
          {
            pattern:
              /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/,
            message: "支付宝账号格式错误",
            trigger: "change",
          },
        ],
      },
      //新增弹窗的类型
      field101Options: [
        {
          label: "支付宝",
          value: 1,
        },
        {
          label: "记账本",
          value: 2,
        },
        {
          label: "银联",
          value: 3,
        },
        {
          label: "薪账户",
          value: 4,
        },
      ],
      PocketBookData: {
        field101: "",
        field102: 1,
        mobile: "",
        Remark: "", //备注
        appk: "", //薪账户
      },
      //银联卡片参数
      UnionPayList: [],
      // 薪账户卡片参数
      payrollData:[],
      //支付宝卡片参数
      AlipayData: [],
      //编辑支付名称弹窗
      editNameShow: false,
      editNameData: {
        hade: "",
        name: "",
        id: "",
      },

      //支付宝签约文件上传显示的列表
      field106fileList: [],
      field107fileList: [],
      field108fileList: [],
      //支付宝签约弹窗参数
      AlipayformData: {
        field104: undefined,
        field105: undefined,
        field106: null,
        field107: null,
        field108: null,
        id: "",
        appId: "", //APPID
        rootCertPath: "", //ROOT文件上传返回的值
        publicCertPath: "", //ROOT文件上传返回的值
        appPrivateKey: "", //ROOT文件上传返回的值
      },
      Alipayrules: {
        field104: [
          {
            required: true,
            message: "请输入APPID",
            trigger: "change",
          },
        ],
        field105: [
          {
            required: true,
            message: "请输入开发者应用私钥",
            trigger: "change",
          },
        ],
      },
      //支付宝签约弹窗显示
      AlipayShow: false,
      //银联签约弹窗
      UnionPayShow: false,
      //银联签约弹窗参数
      UnionPay: {
        field101: undefined,
        field102: 1,
        field103: undefined,
        // mobile: '',
        field104: undefined,
        field105: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        id: "",
      },
      UnionPayrules: {
        field107: [
          {
            required: true,
            message: "请输入商户号",
            trigger: "change",
          },
        ],
        field108: [
          {
            required: true,
            message: "请输入APPK",
            trigger: "change",
          },
        ],
        field109: [
          {
            required: true,
            message: "请输入field109",
            trigger: "change",
          },
        ],
      },
      // 签约的弹窗名称
      titleName: "",
      //二维码
      qrcode: "",
      //充值验证
      moneyrules: {
        field101: [
          {
            required: true,
            message: "请输入金额",
            trigger: "change",
          },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "金额格式错误",
            trigger: "change",
          },
        ],
      },
      //充值参数
      moneyData: {
        field101: "", //金额
        field102: "", //备注
        id: "", //id
      },
      //充值弹窗显示
      moneyShow: false,
      AlipayList: [],
      roleList: [],

      //记账本列表
      PocketBookList: [],
      userId: null,

      editNamerules: {
        name: [
          {
            required: true,
            message: "请输入支付名称",
            trigger: "change",
          },
        ],
      },
      fileList: [],
    };
  },
  computed: {},
  components: { VueQr },
  watch: {},
  mounted() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    this.getList();
  },
  methods: {
    //提现状态开关按钮
    async withdrawStateButton(row) {
      console.log(row, "222");

      let param = {};
      if (this.withdrawId) {
        param = {
          withdrawalAccount: row.id, //提现账户设置
          id: this.withdrawId, //是否属于新增  有ID就是修改 ，没有ID就是新增
        };
        editAPI(param).then((res) => {
          console.log(res, "修改结果");
          if (res.code == 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        param = {
          sysCommonConfig: {
            withdrawalAccount: row.id, //提现账户设置
          },
        };
        comnonConfig(param).then((res) => {
          console.log(res, "提交结果");
          if (res.code == 200) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //更新按钮
    async renewButton(row) {
      const data = await getAccountBalance({ id: row.id });
      if (data.code == 200) {
        this.$message({
          message: "更新成功!",
          type: "success",
        });
        this.getList();
      } else {
        this.$message.error(data.msg);
      }
      console.log(data, "666");
    },
    /** 查询角色列表 */
    async getList() {
      // 获取记账本列表  //0记账本1银行卡2支付宝
      const PocketBookList = await selectTenantExpenditureAccounts({
        tenantId: this.userId,
      });
      //查询提现状态
      const put = await getSetup();
      console.log(put, "888");
      if (put.code == 200) {
        this.withdrawId = put.data.id;
      } else {
        this.$message.error(put.msg);
      }
      // console.log(PocketBookList, "记账本列表2");
      if (PocketBookList.code == 200) {
        // 1银联   2支付宝  3记账本  //之前是在租户设置里，现在不用withdrawalType来判断了
        PocketBookList.data.forEach((item) => {
          console.log(item, "777");
          if (item.id == put.data.withdrawalAccount) {
            item.withdrawState = true;
          } else {
            item.withdrawState = false;
          }
        });
        // 记账本
        this.PocketBookList = PocketBookList.data.filter(
          (item) => item.signAccountType == "ALIPAYACCOUNTBOOK"
        );
        // 银联
        this.UnionPayList = PocketBookList.data.filter(
          (item) =>item.signAccountType == "WUKONG"
        );
        // 支付宝
        this.AlipayData = PocketBookList.data.filter(
          (item) => item.signAccountType == "ALIPAY"
        );
        this.payrollData = PocketBookList.data.filter(
          (item) => item.signAccountType == "PAYACCOUNT"
        );

        // this.form.field103[0] = put.data.withdrawalType - 0;
        // this.form.field103[1] = put.data.withdrawalAccount - 0;
      } else {
        this.$message.error(PocketBookList.msg);
      }
    },
    //支付宝签约
    AlipayEdit(name, row) {
      console.log(row, "支付宝签约");
      this.AlipayformData.id = row.id;
      this.AlipayformData.field105 = row.privateKey;
      this.AlipayformData.field104 = row.appId;
      this.AlipayShow = true;
    },

    //支付宝签约
    AlipayBotton() {
      console.log(this.AlipayformData, "签约数据");
      this.$refs["AlipayformData"].validate(async (valid) => {
        if (valid) {
          if (
            this.AlipayformData.publicCertPath == "" ||
            this.AlipayformData.certPath == "" ||
            this.AlipayformData.rootCertPath == ""
          ) {
            this.$message("请上传对应文件");
          } else {
            let param = {
              id: this.AlipayformData.id,
              appId: this.AlipayformData.field104, //appid
              alipayPublicCertPath: this.AlipayformData.publicCertPath, //支付宝公钥
              rootCertPath: this.AlipayformData.rootCertPath, //ROOT
              certPath: this.AlipayformData.certPath, //应用公钥
              privateKey: this.AlipayformData.field105, //开发者应用私要
            };
            console.log(param, "给后端的参数");
            const data = await updateAlipayInfo(param);
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "签约成功!",
              });
              this.AlipayShow = false;
              this.getList();
              this.AlipayformData.publicCertPath = ""; //支付宝公钥
              this.AlipayformData.rootCertPath = ""; //ROOT
              this.AlipayformData.certPath = ""; //应用私钥
              this.AlipayformData.field104 = "";
              this.AlipayformData.field105 = "";
              this.AlipayformData.id = "";
            } else {
              this.$message.error(data.msg);
            }
          }
          // AlipayBotton,开发者应用私钥
        }
      });
    },
    //银联签约确定按钮
    UnionPayBotton() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {

          console.log(this.UnionPay);
          let param = {};
          if( this.titleName=='薪账户'){
             param = {
            appKey: this.UnionPay.field108, //商户密钥串 APPK
            id: this.UnionPay.id, //自己的ID
          };
           const dataPram = await signByPayAccount(param);
          if (dataPram.code == 200) {
            this.$message({
              message: "签约成功",
              type: "success",
            });
            this.getList();
            this.UnionPayShow = false;
          } else {
            this.$message.error(dataPram.msg);
          }
          }else{
            param = {
            appKey: this.UnionPay.field108, //商户密钥串 APPK
            accountNumber: this.UnionPay.field107, //商户号
            desKey: this.UnionPay.field109, //平台公钥 3DES
            id: this.UnionPay.id, //自己的ID
          };
           const data = await editWkxxConfig(param);
          if (data.code == 200) {
            this.$message({
              message: "签约成功",
              type: "success",
            });
            this.getList();
            this.UnionPayShow = false;
          } else {
            this.$message.error(data.msg);
          }
          }
         
        }
      });
    },
    //银联签约
    UnionPayEdit(name, row) {
      
      console.log(row, "点击了签约按钮");
      this.titleName = name;

      this.UnionPayShow = true;

      this.UnionPay = {
        id: row.id,
        field101: undefined,
        field102: 1,
        field103: undefined,
        // mobile: '',
        field104: undefined,
        field105: undefined,
        field106: undefined,
        field107: row.accountName,
        field108: row.appKey,
        field109: row.desKey,
      };
    },
    //公用的删除
    PocketBookDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(row, "删除");
          const data = await updateAlipayUserAccount({ id: row.id });
          if (data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //支付宝添加弹窗里面的确定按钮
    async editAlipayBotton() {
      this.$refs["editNameData"].validate(async (valid) => {
        if (valid) {
          let param = {
            signAccountId: this.editNameData.id,
            accountName: this.editNameData.name,
          };
          const data = await editSignAccount(param);
          if (data.code == 200) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.editNameShow = false;
            this.getList();
          } else {
            this.$message.error("提交失败");
          }
        }
      });
    },
    //编辑支付名称函数
    editButton(index, row) {
      console.log(index, "index");
      console.log(row, "row");
      if (index == 0) {
        this.editNameData.hade = "编辑记账本";
      } else if (index == "银联") {
        this.editNameData.hade = "编辑银联";
      } else {
        this.editNameData.hade = "编辑支付宝";
      }
      this.editNameData.id = row.id;
      this.editNameData.name = row.accountName;
      this.editNameShow = true;
    },
    //充值确定按钮
    moneyShowButton() {
      this.$refs["moneyData"].validate(async (valid) => {
        if (valid) {
          console.log(this.moneyData, "充值数据");
          // field102
          let param = {
            amount: this.moneyData.field101, //金额
            id: this.moneyData.id, //充值的id
            notes: this.moneyData.field102, //备注
          };
          const data = await getAccountBookRechargeAdress(param);
          console.log(data, "222222");
          if (data.code == 200) {
            this.qrcode = data.msg;
            this.$message({
              message: "请用支付宝扫描二维码充值",
              type: "success",
            });
          } else {
            this.$message.error(data.msg);
          }
        }
      });
    },

    //创建添加弹窗里面的确定按钮
    async PocketBookBotton() {
      this.$refs["PocketBookData"].validate(async (valid) => {
        if (valid) {
          //1支付宝  2记账本 3银联
          let param = {};
          if (this.PocketBookData.field102 == 2) {
            param = {
              tenantId: this.userId,
              accountName: this.PocketBookData.field101, //名称
              accountNumber: this.PocketBookData.mobile, //账号
            };
            // 新增记账本
            const data = await addAlipayUserAccount(param);
            //  console.log(data, "3333");
            if (data.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.centerDialogVisible = false;
              this.PocketBookData.field101 = "";
              this.PocketBookData.mobile = "";
              this.getList();
            } else {
              this.$message.error("提交失败");
            }
          } else if (this.PocketBookData.field102 == 1) {
            param = {
              tenantId: this.userId,
              accountName: this.PocketBookData.field101, //名称
              accountNumber: this.PocketBookData.mobile, //支付宝账号
            };
            // 新增支付宝
            const data = await insertAlipayInfo(param);
            console.log(data, "2222");
            if (data.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
              });
              this.PocketBookData.field101 = "";
              this.PocketBookData.mobile = "";
              this.centerDialogVisible = false;
              this.getList();
            } else {
              this.$message.error("提交失败");
            }
          } else if(this.PocketBookData.field102 == 3){
            param = {
              tenantId: this.userId,
              accountName: this.PocketBookData.field101, //名称
              notes: this.PocketBookData.Remark, //备注
            };
            console.log(param, "houduan");
            insertBankConfig(param).then((res) => {
              console.log(res, "新增银联结果");
              if (res.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.PocketBookData.field101 = "";
                this.PocketBookData.Remark = "";
                this.centerDialogVisible = false;
                this.getList();
              } else {
                this.$message.error("新增失败");
              }
            });
          }else{
             param = {
              tenantId: this.userId,
              accountName: this.PocketBookData.field101, //名称
              notes: this.PocketBookData.Remark, //备注
            };
            createSignAccountByPayAccount(param).then(res=>{
              console.log(res,'新增薪账户')
              if (res.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.PocketBookData.field101 = "";
                this.PocketBookData.Remark = "";
                this.centerDialogVisible = false;
                this.getList();
              } else {
                this.$message.error("新增失败");
              }
            })
          }
        }
      });
    },

    actionUrl() {
      return "";
    },

    handleClick1(tab, event) {
      console.log(tab, event, "2222");
      //如果切换其它就把搜索类型更改掉
      // this.getList();
    },
    // 应用私钥文件上传
    privateKey(file, fileList) {
      this.fileList.push(file);
      let formData = new FormData();
      // formData.append("avatarfile", file.raw);
      formData.append("file", file.raw);
      // AlipayUpload,upload
      AlipayUpload(formData).then((data) => {
        console.log(data, "222");
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "应用私钥成功上传!",
          });
          this.AlipayformData.certPath = data.msg;
        } else {
          this.$message({
            type: "info",
            message: "上传文件失败",
          });
        }
      });
    },
    field107BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    // 支付宝公钥文件上传
    AlipayGongYao(file, fileList) {
      this.fileList.push(file);
      let formData = new FormData();
      // formData.append("avatarfile", file.raw);
      formData.append("file", file.raw);
      // AlipayUpload,upload
      AlipayUpload(formData).then((data) => {
        console.log(data, "222");
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "支付宝公钥成功上传!",
          });
          this.AlipayformData.publicCertPath = data.msg;
        } else {
          this.$message({
            type: "info",
            message: "上传文件失败",
          });
        }
      });
    },
    // ROOT文件上传
    handleChange(file, fileList) {
      this.fileList.push(file);
      let formData = new FormData();
      // formData.append("avatarfile", file.raw);
      formData.append("file", file.raw);
      // AlipayUpload,upload

      AlipayUpload(formData).then((data) => {
        console.log(data, "222");
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "ROOT文件成功上传!",
          });
          this.AlipayformData.rootCertPath = data.msg;
        } else {
          this.$message({
            type: "info",
            message: "上传文件失败",
          });
        }
      });
    },

    //银联管理
    banKSignUp(name, row) {
      //  console.log(row,'银联管理');
      console.log(name, "银联管理名称");
      sessionStorage.row = JSON.stringify(row);
      this.$router.push({
        path: "/finance/bankmanageIndex",
        query: {
          name,
        },
      });
    },

    //支付宝和记账本的管理
    manage(name, row) {
      // console.log(row, "管理");
      row.channelId = name; //0记账本  1银联  2支付宝
      sessionStorage.row = JSON.stringify(row);
      let nameOne = "";
      if (name == "0") {
        nameOne = "记账本";
      } else {
        nameOne = "支付宝";
      }
      this.$router.push({
        path: `/finance/manageIndex`,
        query: {
          name: nameOne,
        },
      });
    },

    //操作金额取消按钮
    moneyCancel() {
      this.moneyShow = false;
      this.qrcode = "";
    },
    //签约
    async SignUp(row) {
      // console.log(row, "222");
      const url = await getUserSignAddresss({
        id: row.id,
      });
      // console.log(url,'22')
      if (url.code == 200) {
        window.open(url.data); //打开新窗口并跳转页面
      } else {
        this.$message.error("操作失败");
      }
    },
    //充值
    Recharge(row) {
      this.moneyShow = true;
      console.log(row, "充值数据参数");
      this.moneyData.id = row.id;
    },
  },
  created() {},
};
</script>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
  /* overflow-y: hidden; */
}
</style>
<style lang="scss" scoped>
//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.xhxBox {
  border-bottom: 1px #eee solid;
  height: 2px;
}
.bank,
.bankBox,
.PocketBook,.payrollDataBox,
.Alipay {
  border-radius: 20px;
  padding: 30px 20px;
  font-size: 20px;
  height: 210px;
  // img {
  //   width: 50px;
  //   position: relative;
  // }
  .fontSize {
    font-size: 15px;
  }
}
// 支付宝
.Alipay {
  background-color: rgb(63, 119, 214);
  // border: 1px #eee solid;
  // background: rgb(231, 228, 231);
  font-weight: 100;
  //图片
  .imgBox {
    background: #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nameBox {
    margin-bottom: 5px;
    font-size: 16px;
    // background: rgb(211, 215, 216);
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-weight: 500;
    width: 285px;
    // border: 1px red solid;
  
    .name_money {
      text-align: right;
    }
    span {
      // border: 1px red solid;
      width: 140px;
      text-overflow: ellipsis; //文本超出显示省略号
      overflow: hidden; //超出隐藏
      white-space: nowrap; //文本不换行
      -webkit-line-clamp: 1; //多行时可以控制显示的行数
      -webkit-box-orient: vertical;
    }
  }
  //备注
  .RemarkBox {
    display: flex;
    // background: #fff;
    border-top: 1px rgb(211, 215, 216) solid;
    color: #fff;
    height: 90px;
    padding: 5px 0px;
    font-size: 14px;
  }
  //按钮
  .ButtonBox {
    display: flex;
    margin-top: 8px;
    .spec {
      font-size: 15px;
      text-decoration: underline;
      color: #fff;
    }
  }
  .fontSize {
    color: #fff;
    font-weight: 100;
    text-decoration: none;
  }
}
// 记账本
.PocketBook {
  // border: 1px #eee solid;
  background: rgb(231, 228, 231);
  font-weight: 100;
  //图片
  .imgBox {
    background: #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nameBox {
    margin-bottom: 5px;
    font-size: 16px;
    // background: rgb(211, 215, 216);
    display: flex;
    width: 285px;
    justify-content: space-between;
    // border: 1px red solid;
    font-weight: 500;
    .name_money {
      text-align: right;
    }
    span {
      // border: 1px red solid;
      width: 140px;
      text-overflow: ellipsis; //文本超出显示省略号
      overflow: hidden; //超出隐藏
      white-space: nowrap; //文本不换行
      -webkit-line-clamp: 1; //多行时可以控制显示的行数
      -webkit-box-orient: vertical;
    }
  }
  //备注
  .RemarkBox {
    display: flex;
    // background: #fff;
    border-top: 1px rgb(61, 61, 61) solid;
    height: 90px;
    padding: 5px 0px;
    font-size: 14px;
  }
  //按钮
  .ButtonBox {
    // border: 1px red solid;
    display: flex;
    margin-top: 8px;
    .spec {
      font-size: 15px;
      text-decoration: underline;
      color: rgb(61, 61, 61);
    }
  }
  .fontSize {
    color: #fff;
    font-weight: 100;
    text-decoration: none;
  }
}
// 薪账户
.payrollDataBox {
  // border: 1px #eee solid;
  background: rgb(66, 66, 66);
  font-weight: 100;
  color: #fff;
  //图片
  .imgBox {
    background: #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nameBox {
    margin-bottom: 5px;
    font-size: 16px;
    // background: rgb(211, 215, 216);
    display: flex;
    width: 285px;
    justify-content: space-between;
    // border: 1px red solid;
    font-weight: 500;
    .name_money {
      text-align: right;
    }
    span {
      // border: 1px red solid;
      width: 140px;
      text-overflow: ellipsis; //文本超出显示省略号
      overflow: hidden; //超出隐藏
      white-space: nowrap; //文本不换行
      -webkit-line-clamp: 1; //多行时可以控制显示的行数
      -webkit-box-orient: vertical;
    }
  }
  //备注
  .RemarkBox {
    display: flex;
    // background: #fff;
    border-top: 1px rgb(255, 255, 255) solid;
    height: 90px;
    padding: 5px 0px;
    font-size: 14px;
  }
  //按钮
  .ButtonBox {
    // border: 1px red solid;
    display: flex;
    margin-top: 8px;
    .spec {
      font-size: 15px;
      text-decoration: underline;
      color: rgb(255, 255, 255);
    }
  }
  .fontSize {
    color: #fff;
    font-weight: 100;
    text-decoration: none;
  }
}

//银联
.bankBox {
  // border: 1px #eee solid;
  // background: rgb(231, 228, 231);
  background: rgb(235, 78, 69);
  font-weight: 100;
  //图片
  .imgBox {
    background: #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nameBox {
    margin-bottom: 5px;
    font-size: 16px;
    // background: rgb(211, 215, 216);
    display: flex;
    width: 285px;
    justify-content: space-between;
    color: #fff;
    font-weight: 500;
    // border: 1px red solid;
    .name_money {
      text-align: right;
    }
    span {
      // border: 1px red solid;
      width: 140px;
      text-overflow: ellipsis; //文本超出显示省略号
      overflow: hidden; //超出隐藏
      white-space: nowrap; //文本不换行
      -webkit-line-clamp: 1; //多行时可以控制显示的行数
      -webkit-box-orient: vertical;
    }
  }
  //备注
  .RemarkBox {
    display: flex;
    // background: #fff;
    border-top: 1px rgb(211, 215, 216) solid;
    color: #fff;
    height: 90px;
    padding: 5px 0px;
    font-size: 14px;
  }
  //按钮
  .ButtonBox {
    display: flex;
    margin-top: 8px;
    .spec {
      font-size: 15px;
      text-decoration: underline;
      color: #fff;
    }
  }
  .fontSize {
    color: #fff;
    font-weight: 100;
    text-decoration: none;
  }
}
//

::v-deep .el-tabs__nav-wrap::after {
  background: none;
}
.logo9 {
  width: 35px;
  height: auto;
  //  border: 1px red solid;
}
.note-box_Box {
  //  border: 1px red solid;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .note-box {
    margin: 10px 0px;
    padding: 0px 20px 20px 20px;
    background: #ffffff;
    border-radius: 10px;
    // box-shadow: 0px 2px 10px 0px rgba(102, 102, 102, 0.57);
    box-shadow: 0 1px 10px rgba(102, 102, 102, 0.2);

    width: 99.9%;

    // .my-info-title {
    //   .logo6 {
    //     width: 50px;
    //     height: 50px;
    //   }
    // }

    .line {
      width: 100%;
      height: 5px;
      border-bottom: 1px #eee solid;
    }
    .contain-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;

      .item-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-right: 1px solid #e8e8e8;
        .label {
          margin-top: 10px;
          font-size: 11px;
          font-weight: 500;
          color: #666666;
        }
        .value {
          font-size: 20px;
          font-weight: 500;
          color: #333;
        }
      }
      .name-box {
        .value {
          font-size: 20px;
          font-weight: 500;
          color: #3875f6;
        }
      }
      .operation-box {
        border-right: none;
        .btns {
          width: 80%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          // border: 1px red solid;
          // img {
          //   cursor: pointer;
          // }
          .spec {
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 500;
            color: #3875f6;
            background: rgba(56, 117, 246, 0.1);
            cursor: pointer;

            overflow: hidden;
            .imgBox {
              // border: 1px red solid;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/qy.png) no-repeat center;
              position: relative;
              top: -8px;
              left: -1px;
            }

            .imgBox:hover {
              border: 1px red solid;
              background: red;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/qy1.png) no-repeat center;
              position: relative;
            }
            .imgBoxa {
              border: 1px red solid;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/cz.png) no-repeat center;
              position: relative;
              top: -8px;
              left: -1px;
            }
            .imgBoxa:hover {
              border: 1px red solid;
              background: red;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/cz1.png) no-repeat center;
              position: relative;
            }
            .imgBoxb {
              border: 1px red solid;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/gl.png) no-repeat center;
              position: relative;
              top: -8px;
              left: -1px;
            }
            .imgBoxb:hover {
              border: 1px red solid;
              background: red;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/gl1.png) no-repeat center;
              position: relative;
            }
            .imgBoxc {
              border: 1px red solid;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/sc.png) no-repeat center;
              position: relative;
              top: -8px;
              left: -1px;
            }
            .imgBoxc:hover {
              border: 1px red solid;
              background: red;
              width: 35px;
              height: 35px;
              float: left;
              background: url(../../../assets/images/sc1.png) no-repeat center;
              position: relative;
            }
          }
        }
      }
    }
  }
}
.account-set {
  .content {
    margin: 10px 20px;
    padding: 10px;
    background: #ffffff;
    border-radius: 4px;
    height: auto;
    box-shadow: 0px 2px 10px 0px rgba(102, 102, 102, 0.2);
    // box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px 20px;
    .my-info-title {
      border-bottom: 1px #eee solid;
      display: flex;
      align-items: center;
      padding: 0px 0px 17px 0;
      margin-bottom: 8px;
      // border: 1px red solid;
      .logo6 {
        margin: 0px 10px 0px 0px;
        width: 25px;
        height: auto;
      }
    }
    .my-info-title2 {
      padding-top: 20px;
      display: flex;
      align-items: center;
      //  border: 1px red solid;

      .name {
        font-size: 15px;
        font-weight: 500;
        color: #333333;
        margin-left: 10px;
        //  border: 1px red solid;
      }
    }
    .search-box {
      height: 1px;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    .tally-book {
      //  border: 1px red solid;
      //  padding:0px 10px;
      .btns {
        display: flex;
        // border: 1px red solid;
        align-items: center;
        .item-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 500;
          color: #ffffff;
          background: #3875f6;
          border-radius: 8px;
          padding: 3px 8px;
          margin-right: 10px;
          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
